
<template>
  <aside>
    <div class="description">拖动节点到右侧框中</div>

    <div class="nodes">
      <div
        class="vue-flow__node-input"
        :draggable="true"
        @dragstart="onDragStart($event, 'input')"
      >
        新增节点
      </div>

      <!-- <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">中间节点</div>

      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">结束节点</div> -->
    </div>
  </aside>
</template>
<script setup>
function onDragStart(event, nodeType) {
  console.log(event, nodeType, "event-nodeType");
  if (event.dataTransfer) {
    event.dataTransfer.setData("application/vueflow", nodeType);
    event.dataTransfer.effectAllowed = "move";
  }
}
</script>
<style lang="scss">
.nodes {
  display: flex;
  justify-content: center;
  .vue-flow__node-input {
    width: 100px;
    height: 40px;
    line-height: 20px;
    border: 1px solid #0a4081;
    border-radius: 50px;
  }
}
.dndflow aside .description {
    margin-bottom: 10px;
    text-align: center;
}
</style>